<template>
  <div>
    <div style="margin: 10px 0">
      <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-user" v-model="bookName"></el-input>
      <el-input style="width: 200px" placeholder="请输入作者" suffix-icon="el-icon-message" class="mr-l-5" v-model="author"></el-input>
      <el-button class="mr-l-5" type="primary" @click="load">查询</el-button>
      <el-button class="mr-l-5" type="warning" @click="reset">重置</el-button>
    </div>
    <el-table :data="tableData"  stripe border header-cell-class-name="headerBg"
              @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
<!--      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table  :data="props.row">
            <el-table-column prop="id" label="id"></el-table-column>
            <el-table-column  prop="bookId" label="书编号"></el-table-column>
            <el-table-column  prop="bookId" label="书信息">
              <template slot-scope="scope">
                <span v-if="scope.row.bookType == 0">{{scope.row.book.name}} | 作者：{{scope.row.book.author}}</span>
                <span v-if="scope.row.bookType == 1">{{scope.row.usedBook.name}} | 作者：{{scope.row.usedBook.author}}</span>
              </template>
            </el-table-column>
            <el-table-column  prop="bookType" label="类型">
              <template slot-scope="scope">
                <span v-if="scope.row.bookType == 0">新书</span>
                <span v-if="scope.row.bookType == 1">二手书</span>
              </template>
            </el-table-column>
            <el-table-column  prop="count" label="数量"></el-table-column>
            <el-table-column  prop="bookType" label="吊牌价">
              <template slot-scope="scope">
                <span v-if="scope.row.bookType == 0">{{scope.row.book.price}}</span>
                <span v-if="scope.row.bookType == 1">{{scope.row.usedBook.price}} 元</span>
              </template>
            </el-table-column>
            <el-table-column  prop="bookType" label="实际支付">
              <template slot-scope="scope">
                <span>{{scope.row.resultPrice}}元</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>-->
      <el-table-column prop="bookName" label="书名称" width="200px"></el-table-column>
      <el-table-column prop="author" label="作者" ></el-table-column>
      <el-table-column prop="collegeE" label="学院" >
        <template slot-scope="scope">
          <span  v-if="scope.row.collegeE">{{scope.row.collegeE.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="majorE" label="专业" >
        <template slot-scope="scope">
          <span  v-if="scope.row.majorE">{{scope.row.majorE.name}} |</span>
        </template>
      </el-table-column>
      <el-table-column label="联系电话">
        <template slot-scope="scope">
          <span  v-if="scope.row.phone">{{scope.row.phone}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="下单时间" ></el-table-column>
      <el-table-column prop="express" label="备注" ></el-table-column>
      <el-table-column label="操作" width="100px">
        <template slot-scope="scope">
          <el-button
              v-if="scope.row.status == 0"
              size="mini"
              type="danger"
              @click="open(scope.row)">处理<i class="el-icon-edit"></i></el-button>
          <el-button
              v-if="scope.row.status == 1"
              size="mini"
              type="primary"
              disabled
              @click="handleEdit(scope.row)">审核通过<i class="el-icon-edit"></i></el-button>
          <el-button
              v-if="scope.row.status == 2"
              size="mini"
              type="warning"
              disabled
              @click="handleEdit(scope.row)">审核未通过
            <i class="el-icon-edit"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div  class="block" style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum">
      </el-pagination>
    </div>

  </div>
</template>
<script>
export default {
  name: "User",
  data(){
    return {
      flag: false,
      tableData: [],
      bookName:'',
      author:'',
      form: {name:''},
      dialogFormVisible: false,
      pageNum: 1,
      pageSize: 10,
      totalNum: 10,
      multipleSelection: [],
      value: 0,
      options:[],
      fileList:[]
    }
  },
  created() {
    //请求分页查询数据
    this.load()
  },
  methods:{
    load(){
      this.request.get('/recovery/page',{
        params: {
          pageNum: this.pageNum,
          pageSize : this.pageSize
        }
      }).then(res => {
        this.tableData = res.data.records
        this.totalNum = res.data.total
      })
    },
    save(){
      this.request.post("/recovery", this.form).then(res => {
        if (res.status === '200'){
          this.dialogFormVisible= false
          this.$message.success("操作成功")
          this.load()
        }else{
          this.$message.error("操作失败")
          this.dialogFormVisible= false;
        }
      })
    },
    handleDelete(id){
      this.request.delete("/user/"+id).then(res => {
        if (res){
          this.$message.success("删除成功")
          this.pageNum = 1
          this.load();
        }else{
          this.$message.error("删除失败")
        }
      })
    },
    open(row) {
      this.$confirm('是否审核通过？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '审核通过',
        cancelButtonText: '不通过'
      })
          .then(() => {
            row.status = 1
            this.request.post("/recovery",row).then(res=> {
              console.log(res)
              if (res){
                this.$message({
                  type: 'success',
                  message: '保存修改'
                });
              }
            })

          })
          .catch(action => {
            row.status = 2
            this.request.post("/recovery",row).then(res=> {
              if (res){
                this.$message({
                  type: 'warning',
                  message: action === 'cancel'
                      ? '放弃保存并离开页面'
                      : '停留在当前页面'
                })
              }
            })

          });
    },
    getSort(){
      this.request.get('/bookSort/getAll').then(res => {
        res.data.forEach(item =>{
          item.children.forEach(child =>{
            if (child.children.length === 0){
              child.children = undefined
            }
          })
        })
        this.options = res.data
      })
    },
    handleAdd(){
      this.getSort()
      this.form = {}
      this.dialogFormVisible = true
      this.fileList = []
      this.value = 0
    },
    reset(){
      this.bookName = "",
          this.author="",
          this.load();
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    changStatus(row){
      console.log(row)
      this.request.post('/book',row).then(res => {
        if (res.status === '200'){
          this.$message.success("成功")
        }
      })
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.load();
    },
    handleCurrentChange(pageNum){
      this.pageNum = pageNum
      this.load()
    },
    exp(){
      window.open("http://localhost:8000/bookmall/book/export")
    },
    handleSuccess(){
      this.$message.success("导入成功")
      this.load();
    },
    uploadSuccess(response, file, fileList){
      console.log(file)
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
      console.log(file)
      const id = file.id
      this.request.delete('/file/'+id).then(res =>{
        this.$message.success("删除成功")
      })
    },
    handlePreview(file) {
      console.log(file);
    },
    getUrl(row){
      var result
      var url
      if (row.files !== null){
        result = JSON.stringify(row.files).split('"')
        url = result[1]
      }
      return url
    },
    getList(row){
      var result
      var i = 1
      var len
      var url =[]
      if (row.files !== null){
        result = JSON.stringify(row.files).split('"')
        result.forEach(res =>{
          if (res !=="[" && res !=="]" && res !==","){
            url.push(res)
          }
        })
      }
      return url
    }

  }
}
</script>

<style>
.headerBg{
  background: #eee !important;
}
.el-switch__label * {
  line-height: 1;
  font-size: 12px;
  display: inline-block;
}
.el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
  font-size: 12px !important;
}
/*打开时文字位置设置*/
.el-switch__label--right {
  z-index: 1;
  right: 22px;
}
/*关闭时文字位置设置*/
.el-switch__label--left {
  z-index: 1;
  left: 20px;
}
/*显示文字*/
.el-switch__label.is-active {
  display: block;
}
/*开关宽度*/
.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 45px !important;
}

</style>